<!-- 文件夹详情 -->
<template>
    <div class="task-detail-container">
        <div class="task-detail-content">
            <div class="t-info">
                <div class="t-info__statistics">
                    <div class="t-info__statistics_title">
                        目录信息
                    </div>

                    <div class="t-info__statistics_content">
                        <div class="t-info__statistics_item">
                            <div class="t-info__statistics_item_num">我的任务目录</div>
                            <div class="t-info__statistics_item_name">目录名称</div>
                        </div>
                        <div class="t-info__statistics_item">
                            <div class="t-info__statistics_item_num">1</div>
                            <div class="t-info__statistics_item_name">包含任务数量</div>
                        </div>
                        <div class="t-info__statistics_item">
                            <div class="t-info__statistics_item_num">2023/1/1 10:22:22</div>
                            <div class="t-info__statistics_item_name">创建时间</div>
                        </div>
                        <div class="t-info__statistics_item">
                            <div class="t-info__statistics_item_word">
                                这这这这这这这这这这这
                            </div>
                            <div class="t-info__statistics_item_name">目录描述</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            form: {},
            selectedNodeInfo: {}, // 当前选中节点的信息
        }
    },
    components: {
    },
    props: {
        nodeInfo: {
            type: Object,
        }
    },

    mounted() {
        this.form = this.nodeInfo.data;
    },

    methods: {
        submitForm() { },
        enterExperiment() {
            this.$router.push({ name: "experimentBuild", query: { experimentId: this.nodeInfo.id } })
        },
    }
}

</script>

<style lang="scss" scoped>
.task-detail-container {
    width: 100%;
    height: 65%;

    .task-detail-content {
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin-top: 20px;

        .t-info {
            width: 80%;

            .t-info__statistics {
                border-radius: 5px;
                padding: 10px 20px;
                background-color: var(--ui-component-background-alt);
                margin-bottom: 30px;

                .t-info__statistics_title {
                    font-size: var(--ui-font-size-base);
                }

                .t-info__statistics_content {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 20px;
                    flex-wrap: wrap;

                    .t-info__statistics_item {
                        .t-info__statistics_item_num {
                            font-size: var(--ui-font-size-title);
                        }

                        .t-info__statistics_item_word {
                            font-size: var(--ui-font-size-base);
                            color: var(--app-text-fg-low);
                        }

                        .t-info__statistics_item_name {
                            font-size: var(--ui-font-size-sm);
                            color: var(--app-text-fg-low);
                            margin-top: 10px;
                            margin-bottom: 20px;

                        }
                    }

                    & :last-child {
                        width: 100%;
                    }
                }

            }

        }
    }
}
</style>